<template>
  <div class="register_front">
    <Headnav></Headnav>
    <!-- 网站大图标 -->
    <div class="logo">
      
        <img style="width:175%" src=" ../images/rl_top.35edfde.png" />
      
    </div>

    <div class="exple">
      <span class="line" style="width:45%"></span>
      <span class="txt">注册</span>
      <span class="line" style="width:45%"></span>
    </div>

    <div style="height: 100%; border: ">
      <div style="width: 90%; margin: 0 auto; height: 400px; margin-top: 60px">
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!--   V-model= "ruleForm2.username"  双向绑定获取-->
          <div style="margin: 0 auto; width: 70%">
            <el-form-item label="用户名" prop="username">
              <el-input
                type="text"
                v-model="ruleForm2.username"
                autocomplete="off"
                class="in"
              ></el-input>
            </el-form-item>
          </div>
          <div style="margin: 0 auto; width: 70%">
            <el-form-item label="密码" prop="pwd">
              <el-input
                type="password"
                v-model="ruleForm2.pwd"
                autocomplete="off"
                class="in"
              ></el-input>
            </el-form-item>
          </div>
          <div style="margin: 0 auto; width: 70%">
            <el-form-item label="确认密码" prop="pwd1">
              <el-input
                type="password"
                v-model="ruleForm2.pwd1"
                autocomplete="off"
                class="in"
              ></el-input>
            </el-form-item>
          </div>
          <div style="margin: 0 auto; width: 70%">
            <el-form-item label="邮箱" prop="email">
              <el-input
                type="email"
                v-model="ruleForm2.email"
                class="in"
              ></el-input>
            </el-form-item>
          </div>
          <div class="layui-test" style="margin: 0 auto; width: 90%">
            <el-form-item>
              
              <div class="layui-form-item" >
                <div class="switch-test" >
                  
                  <el-switch class="switch-test"
                    prop="value3"
                    v-model="ruleForm2.value3"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="我已经同意"
                    
                  ></el-switch>

                  <font color="#00A1D6">《用户使用协议》</font> 和
                  <font color="#00A1D6">《账号中心规范》</font>
                  
                </div>
              </div>
              <br>
              <div style="display:block;margin:0 auto">
                <span class="line" style="width: 35%;"></span>
                <el-button type="danger" @click="submitForm('ruleForm2')">注册</el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
                <span class="line" style="width: 35%;"></span>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <Footer />
  </div>
</template>


<script>
export default {
  data() {var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.pwd !== '') {
            this.$refs.ruleForm2.validateField('pwd1');
          }
        callback();
      };
      

    }; var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (!value ) {
          callback(new Error('请同意协议'));
        }else{
            callback();
        }
      };
    return {
      ruleForm2: {//前端传送数据记录
        username: "",
        pwd: "",
        pwd1: "",
        email: "",
        value3: false,
      }, rules: {
        pwd: [{ validator: validatePass, trigger: "blur" }],
        pwd1: [{ validator: validatePass2, trigger: "blur" }],
        
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        email:[{required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }], 

      },
    };
  },
  methods: {
    async submitForm(formName) {
      try {
        this.$refs[formName].validate(async (valid) => {
          // 对ref为ruleForm的form表单进行rules的规则验证，返回验证结果valid=>true/false
          // async (valid) => {}是箭头函数的写法async function FuncationName(valid)
          // async|(异步) function|(函数) FuncationName(valid)|(函数名(入参对象)) {}
          if (valid) {
            // 提交逻辑
            const res = await this.$axios.post("/regist", this.ruleForm2); //进行hhtps请求往后端请求
            // api接口'/regist', 请求参数this.ruleForm对象
            // 异步请求成功后执行后面代码，失败不执行，会被catch抓到抛出的错误，具体方法查看axios.js封装的处理方法(我注释说明了)
            // console.log(res.headers)
            // console.log(res)
            //const jwt = res.headers["authorization"]; //头文件判断
            const userInfo = res.data.data;
            console.log(userInfo);
            //const token = res.headers["authorization"];
            //this.$store.commit("SET_TOKEN", jwt);
            this.$store.commit("SET_USERINFO", userInfo);
            // vuex保存信息
            this.go("/"); // 路由跳转(main.js全局混入)
          } else {
            console.log("error submit!!"); // 表单验证错误
            return false;
          }
        });
      } catch (e) {
        console.log(e.message || e); // 错误内容
        console.log("api error!!"); // try{}内代码执行错误
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  
};
</script>

<style scoped>
.in {
  width: 75%;
}

.logo {
 widows: none;
}

.logo div {
  width: 980px;
  margin: 0 auto;
}
s .exple {
  margin-top: 25px;
  height: 50px;
  line-height: 60px;
  text-align: center;
}

.line {
  display: inline-block;
  width: 45%;
  border-top: 1px solid #ccc;
  margin-bottom: 5px;
  height: 0.5px;
  background: black;
}

.exple .txt {
  color: #686868;
  vertical-align: middle;
  font-size: 35px;
}
.layui-test{
  text-align: center;
  float: left;
  
}
.switch-test{
  text-align: left;
  padding: 0 0 0 16%;
  
}
</style>